<script>
import axios from "axios";

export default {
    name: "XiaoQuComponent",
    data(){
        return{
            value1: '',
            input: '',
            dialogFormVisible: false,
            dialogTitle:'',//对话框标题
            form: {
                id:'',
                replytext:'',
                ruid:''
            },
            tableData:[],
            formLabelWidth: '120px',
            //搜索框数据对象
            searchContent:{
                problemtitle: "",
                time:[],
                pageNum: 1,
                pageSize: 10,
            },
            row:{},      // 全局row 把scope.row赋给它
            page:{
                pageSize:10,    //默认每页显示10条
                currentPage:1,  //默认显示第一页
                total:0 //总条数
            },
        }
    },
    //   页面初始化后执行
    created() {
        this.flushPage();
    },
    methods:{
        save() {
            //JSON.parse(sessionStorage.getItem(""))
            this.dialogFormVisible = false;
            this.axios.post("/reply/addReply", {
                problemId:this.row.cid,
                ruid:this.form.ruid,
                userId: JSON.parse(sessionStorage.getItem("user")).id,
                replytext:this.form.replytext,
                rid:null,
                floor:1,
                createtime:this.formatDateTime(new Date())
            }).then((res) => {
                console.log(res.data);
                if (res.data.code===200){
                    this.$message("回复成功")
                }
                this.flushPage()
            })
        },
        //保存后清空表单
        clearForm(){},
        //格式化时间
        formatDateTime(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        //取消
        cancel(){
            this.dialogFormVisible = false;
        },
        //刷新页面
        flushPage(){
            this.axios.get("/problem/getProblemAndPage",
                {
                    params:{
                        //传输的参数
                        pageNo: 1,
                        pageSize: 10,
                    }
                }).then((res)=>{
                console.log(res.data.data)
                this.tableData=res.data.data.list;
                //页面加载时添加总数量
                this.page.total=res.data.data.total;
            }).catch(err=>{ console.log(err);})
        },
        //删除
        deleteClick(row){
            console.log("-----------------" + row.cid)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.delete("/problem/delete",{
                    params:{
                        cid:row.cid,
                    }
                }).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.flushPage();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //搜索
        searchClick(){
            this.axios.get( '/problem/selectAllByLike',
                {
                    params:{
                        //传输的参数
                        problemtitle:this.searchContent.problemtitle===undefined?'':this.searchContent.problemtitle,
                        pageNum:this.searchContent.pageNum===undefined?'':this.searchContent.pageNum,
                        pageSize:this.searchContent.pageSize===undefined?'':this.searchContent.pageSize,
                        startTime:this.searchContent.time[0]===undefined?'':this.formatDateTime(this.searchContent.time[0]),
                        endTime:this.searchContent.time[1]===undefined?'':this.formatDateTime(this.searchContent.time[1]),
                    }
                }
            ).then((res)=>{
                //处理响应数据
                console.log("-----------"+res.data.data.list);
                //将得到的数据加载到tableData
                this.tableData=res.data.data.list;
                this.page.total=res.data.data.total;
            }).catch(err=>{})
        },
        //分页函数
        //点击按钮切换页面
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage; //每次点击分页按钮，当前页发生变化
            console.log("页码切换：" +  this.page.currentPage);          // 获取改变页码后的数据
            this.axios.get('/problem/getProblemAndPage',
                {
                    params:{
                        //传输的参数
                        pageNo: this.page.currentPage,
                        pageSize: this.page.pageSize,
                    }
                }
            ).then((res)=>{
                //更新表格数据
                this.tableData=res.data.data.list;
                //页面加载时添加总数量
                this.page.total=res.data.data.total;
            }).catch(err=>{
                console.log(err)
            });
        },

        //回复
        reply(row){
            this.dialogTitle = "回复问题";
            this.dialogFormVisible = true;
            this.row = row;
            this.form.ruid = this.row.user.id
            console.log(this.form.ruid)
        }
    }
}
</script>

<template>
    <div class="xiaoqu">
        <div class="xiaoqu-content">
            <div class="searchBox">
                <div class="searchLi">
                    <span class="xiaoquName">标题：</span>
                    <input type="text" autocomplete="off" v-model="searchContent.problemtitle">
                </div>
                <div class="searchLi">
                    <span>创建时间：</span>
                    <el-date-picker
                        v-model="searchContent.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="searchBtn">
                    <el-button type="primary" @click="searchClick">搜索</el-button>
                </div>
            </div>
            <div class="addXiaoquBtn">
                <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" >
                    <el-form :model="form">
                        <el-form-item label="回复内容" :label-width="formLabelWidth">
                            <el-input v-model="form.replytext" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button @click="save">保 存</el-button>
                    </div>
                </el-dialog>
            </div>
            <div class="xiaoqu-table">
                <el-table
                    :data="tableData"
                    border
                    :cell-style="{'text-align':'center'}"
                    :header-cell-style="{background: '#1890ff',color: '#ffffff','text-align': 'center'}">
                    <el-table-column
                        prop="cid"
                        label="Id">
                    </el-table-column>
                    <el-table-column
                        prop="problemtitle"
                        label="标题">
                    </el-table-column>
                    <el-table-column
                        prop="problemtext"
                        label="内容">
                    </el-table-column>
                    <el-table-column
                        prop="replies"
                        label="回复数量">
                    </el-table-column>
                    <el-table-column
                        prop="user.username"
                        label="用户名">
                    </el-table-column>
                    <el-table-column
                        prop="createtime"
                        label="创建时间">
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button @click="reply(scope.row)" type="text" size="small">回复</el-button>
                            <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--分页按钮-->
            <div class="block">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.pageNum"
                    :page-size="10"
                    layout="prev, pager, next,jumper, ->, total"
                    :total="page.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<style scoped>
.xiaoqu{
    height: 800px;
    /*background-color: hotpink;*/
}
.xiaoqu-content{
    padding: 20px;
}
.searchBox{
    display: flex;
    justify-content: flex-start;
}
.searchLi{
    margin-right: 20px;
}
.addXiaoquBtn{
    margin-top: 20px;
}
input{
    height: 34px;
    outline: none;
    border: 1px solid #aaa;
    padding: 0 15px;
    border-radius: 5px;
}
input:hover{
    border: 1px solid #555555;
}
input:focus{
    border: 1px solid #409eff;
}
.addBtn{
    padding: 10px 20px;
    background-color: #409eff;
    color: whitesmoke;
    border: 1px solid #409eff;
}
.xiaoqu-table{
    margin-top: 20px;
    table-layout: auto;
}
</style>